<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>缴费</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css" media="all"/>
    <style>
        #dataFrm{
            margin: -75px 0px 0px 500px;
        }
        .dataFrm_input{
            font-size: 16px;
            width: 150px;
            height: 20px;
            margin-right: 20px;
            margin-bottom: 8px;
        }
        .dataFrm_td{
            display: block;
            width: 80px;
            text-align: right;
        }
        #add{
            margin: 0px;
        }
        #addPay{
            width:200px;
            font-size: 16px;
            width: 150px;
            height: 30px;
            margin-right: 20px;
        }
    </style>
</head>
<body>
<!-- 搜索条件开始 -->
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
    <legend>查询条件</legend>
</fieldset>
<form class="layui-form" method="post" id="searchFrm">
    <div class="layui-form-item">
        <div class="layui-inline">
            <label class="layui-form-label">住院号:</label>
            <div class="layui-input-inline">
                <input type="number" id="shows" lay-verify="required|number" autocomplete="off" class="layui-input" style="width:200px" >
            </div>
        </div>
        <div class="layui-inline" style="position: absolute;left: 340px;top:66px;">
            <div class="layui-input-inline">
                <button type="button" class="layui-btn layui-btn-normal  layui-icon layui-icon-search" id="doSearch">查询</button>
            </div>
        </div>
    </div>
</form>
<form class="layui-form"  lay-filter="dataFrm" id="dataFrm">
    <input type="hidden" id="show" name="registerid">
    <input type="hidden" id="hidden" name="moneys" value="0">
    <table>
        <tr>
            <td class="dataFrm_td">姓名：</td>
            <td><input type="text" id="ceshi" class="dataFrm_input" name="userName" readonly></td>
            <td class="dataFrm_td">科室：</td>
            <td><input type="text" class="dataFrm_input" name="department" readonly></td>
            <td class="dataFrm_td">金额：</td>
            <td><input type="text" class="dataFrm_input" name="money" readonly></td>
        </tr>
        <tr>
            <td class="dataFrm_td">性别：</td>
            <td><input type="text" class="dataFrm_input" name="sex" readonly></td>
            <td class="dataFrm_td">医生：</td>
            <td><input type="text" class="dataFrm_input" name="doctorName" readonly></td>
            <td class="dataFrm_td">已用：</td>
            <td><input type="text" class="dataFrm_input" id="yong" readonly></td>
        </tr>
        <tr>
            <td class="dataFrm_td">年龄：</td>
            <td><input type="text" class="dataFrm_input" name="age" readonly></td>
            <td class="dataFrm_td">床位：</td>
            <td><input type="text" class="dataFrm_input" name="bedName" readonly></td>
            <td class="dataFrm_td">余款：</td>
            <td><input type="text" class="dataFrm_input" id="yu" readonly></td>
        </tr>
    </table>
</form>
<!-- 数据表格开始 -->
<div  style="display: none;" id="ToolBar">
    <input type="number" name="pay" id="addPay" lay-verify="required|number" autocomplete="off" lay-event="addPay" placeholder="请输入预交金额" class="pay" >
    <button type="button" class="layui-btn layui-btn-sm" lay-event="add" id="add">预交</button>
</div>
<table class="layui-hide" id="pay" lay-filter="pay"></table>
<!-- 数据表格结束 -->
<script src="/static/layui/layui.js"></script>
<script type="text/javascript" th:inline="none">
    var tableIns;
    layui.use([ 'jquery', 'layer', 'form', 'table'  ], function() {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var laydate = layui.laydate;
        //渲染数据表格
        tableIns=table.render({
            elem: '#pay'   //渲染的目标对象
            ,url:'../liao/selPays' //数据接口
            ,title: '用户数据表'//数据导出来的标题
            ,toolbar:"#ToolBar"   //表格的工具条
            ,height:'full-200'
            ,page: 1  //是否启用分页, limits: [10, 20, 30]
            ,limits: [7, 20, 30]
            ,limit: 7//默认采用3
            ,cols: [[   //列表数据
                {field:'registerid', title:'住院号',align:'center',width:'25%'}
                ,{field:'userName', title:'姓名',align:'center',width:'25%'}
                ,{field:'money', title:'预交金额',align:'center',width:'25%'}
                ,{field:'payDate', title:'交款时间',templet: "<div>{{layui.util.toDateString(d.payDate, 'yyyy年MM月dd日 HH:mm:ss')}}</div>",align:'center',width:'25%'}
            ]]
        })
        //查询
        $("#doSearch").click(function(){
            if($("#shows").val()==""){
                layer.msg("请输入住院号！");
                $("#shows").select();
                return false;
            }else{
                $("#hidden").val(0);
                sel();
            }
        });
        //失焦事件
        $("#shows").blur(function(){
            $("#dataFrm")[0].reset();
            $("#show").val($(this).val());
            $("#hidden").val(0);
            tableIns.reload({
                url:"../liao/selPays"
            })
        });
        function sel(){
            var params=$("#dataFrm").serialize();
            $.ajax({
                url: '../liao/selPay',
                dataType: 'json',
                type: 'post',
                data:params,
                success: function (data) {
                    if(data==""){
                        layer.msg("请输入正确的住院号！");
                        $("shows").select();
                    }else{
                        $.each(data, function (index, item) {
                            for(var i in item){
                                $("input[name="+i+"]").val(item[i])
                            }
                        });
                        sels();
                        var params=$("#dataFrm").serialize();
                        tableIns.reload({
                            url:"../liao/selPays?"+params
                        })
                    }
                }
            })
        }
        table.on("toolbar(pay)",function(obj){
            if(obj.event=='addPay'){
                $("#hidden").val(0);
                if($("#shows").val()==""){
                    layer.msg("请输入住院号！");
                    $("#shows").select();
                    return false;
                }
                $(this).blur(function(){
                    $("#hidden").val($(this).val());
                });
            }
            if(obj.event=='add') {
                if($("#shows").val()==""){
                    layer.msg("请输入住院号！");
                    $("#shows").select();
                    return false;
                }
                if($("#ceshi").val()==""){
                    layer.msg("请点击查询！");
                    return false;
                }
                if($("#hidden").val()==""){
                    layer.msg("请输入预交金额！");
                    return false;
                }
                if($("#hidden").val()==0){
                    layer.msg("请重新输入预交金额！");
                    return false;
                }
                sel();
                $("#hidden").val(0);
            }
        })
        function sels(){
            var params=$("#dataFrm").serialize();
            //查询余额
            $.post("selSurplus",params,function(inp) {
                if(inp==""){
                    $("#yong").val(0);
                }else{
                    $.each(inp, function (index, item) {
                        for(var i in item){
                            if(i=="repicetotal"){
                                $("#yong").val(item[i]);
                            }
                        }
                    });
                }
                $("#yu").val($("input[name='money']").val()-$("#yong").val());
            })
        }
    });
</script>
</body>
</html>